<template>
    <TabBar>
      <!-- 直接这样传路径,一个slot里面可以插N多东西-->
      <TabBarItem path="/home" active-color="blue">
        <img slot="item-icon-active" src="@/assets/img/tabbar/首页a.png">
        <img slot="item-icon" src="@/assets/img/tabbar/首页.png" alt="">
        <!-- 使图片与文字分行  div是独占一行的-->
        <div slot="item-text">首页</div>
      </TabBarItem>

      <TabBarItem path="/category">
        <img slot="item-icon-active" src="@/assets/img/tabbar/分类ac.png">
        <img slot="item-icon" src="@/assets/img/tabbar/分类.png" alt="">
        <!-- 使图片与文字分行  div是独占一行的-->
        <div slot="item-text">分类</div>
      </TabBarItem>

      <TabBarItem path="/shopCar">
        <img slot="item-icon-active" src="@/assets/img/tabbar/购物车ac.png">
        <img slot="item-icon" src="@/assets/img/tabbar/购物车.png" alt="">
        <div slot="item-text">购物车</div>
      </TabBarItem>

      <TabBarItem path="/profile">
   <!--     <img slot="item-icon-active" src="../../../assets/img/tabbar/我的.png">
        <img slot="item-icon" src="../../../assets/img/tabbar/我的ac.png" alt="">-->
        <img slot="item-icon-active" src="@/assets/img/tabbar/我的.png">
        <img slot="item-icon" src="@/assets/img/tabbar/我的ac.png" alt="">
        <div slot="item-text">我的</div>
      </TabBarItem>

    </TabBar>
</template>



<script>
  /*import TabBar from '../../common/tab-bar/tab-bar'
  import TabBarItem from '../../common/tab-bar/tab-bar-item'*/
  //注意别名的写法  以@/开头+设置的别名
  import  TabBar from '@/components/common/tab-bar/tab-bar'
  import  TabBarItem from '@/components/common/tab-bar/tab-bar-item'
  export default {
    name: "MainTabBar",
    components:{
      TabBar,
      TabBarItem
      //最后在App.vue里面引入mainTabBar
    }
  }
</script>

<style scoped>

</style>